<!-- pages/question-bank/category.vue -->
<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header" :style="{ backgroundColor: categoryColor }">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <text class="title">{{ categoryTitle }}</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
    </view>

    <!-- 试卷列表区域 -->
    <view v-else>
      <view v-if="examList.length > 0" class="exam-list">
        <view 
          v-for="(item, index) in examList" 
          :key="index" 
          class="exam-item"
          @tap="navigateToExamDetail(item.id)"
        >
          <view class="exam-info">
            <text class="exam-title">{{ item.title }}</text>
            <text class="exam-desc">{{ item.description }}</text>
            <view class="exam-meta">
              <text class="meta-item">总分: {{ item.totalScore }}分</text>
              <text class="meta-item">及格分: {{ item.passingScore }}分</text>
              <text class="meta-item">时长: {{ item.duration }}分钟</text>
            </view>
          </view>
          <view class="exam-actions">
            <view class="difficulty">
              <text class="difficulty-label">难度:</text>
              <view class="stars">
                <text 
                  v-for="n in 5" 
                  :key="n" 
                  class="star" 
                  :class="{ active: n <= item.difficultyLevel }"
                >★</text>
              </view>
            </view>
            <view :class="['status-tag', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</view>
          </view>
        </view>
      </view>
      <view v-else class="empty-state">
        <image src="/static/icons/empty.png" mode="aspectFit" class="empty-icon"></image>
        <text class="empty-text">暂无试卷，请稍后再来~</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { request } from '@/utils/request'

// 组件状态
const loading = ref(true)
const categoryId = ref(null)
const categoryTitle = ref('题库详情')
const categoryColor = ref('#4C84FF')
const examList = ref([])

const loadingText = {
  contentdown: '上拉显示更多',
  contentrefresh: '正在加载...',
  contentnomore: '没有更多数据了'
}

// 颜色映射
const categoryColorMap = {
  1: '#4C84FF', // 英语一
  2: '#5C95FF', // 英语二
  3: '#FF6B6B', // 政治
  4: '#4CAF50', // 数学一
  5: '#FF9F43', // 408计算机
  6: '#786FFF'  // 199管理类
}

// 标题映射
const categoryTitleMap = {
  1: '英语一题库',
  2: '英语二题库',
  3: '政治题库',
  4: '数学一题库',
  5: '408计算机专业课',
  6: '199管理类联考'
}

// 初始化
// 初始化
onMounted(() => {
  // 获取路由参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.$page?.options
  
  if (options && options.categoryId) {
    categoryId.value = parseInt(options.categoryId)
    categoryTitle.value = categoryTitleMap[categoryId.value] || '题库详情'
    categoryColor.value = categoryColorMap[categoryId.value] || '#4C84FF'
    fetchExamList()
  } else {
    showErrorToast('无法获取分类信息')
    loading.value = false
  }
})

// 获取试卷列表
const fetchExamList = async () => {
  loading.value = true
  try {
    const res = await request({
      url: `http://localhost:8888/category/list`,
      method: 'GET'
    })
    
    if (res.code === 200) {
      examList.value = res.data || []
    } else {
      showErrorToast('获取试卷列表失败')
    }
  } catch (error) {
    console.error('获取试卷列表错误:', error)
    showErrorToast('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 导航到试卷详情
const navigateToExamDetail = (examId) => {
  uni.navigateTo({
    url: `/pages/question-bank/exam-detail?examId=${examId}`
  })
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'available': '可用',
    'draft': '草稿',
    'archived': '已归档'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'available': 'status-available',
    'draft': 'status-draft',
    'archived': 'status-archived'
  }
  return classMap[status] || ''
}

// 显示错误提示
const showErrorToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none',
    duration: 2000
  })
}
</script>
<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  color: #fff;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  font-size: 40rpx;
  font-weight: bold;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 20rpx;
}

.loading {
  padding: 30rpx 0;
  text-align: center;
}

.exam-list {
  padding: 20rpx;
}

.exam-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.exam-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.exam-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.exam-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #888;
  margin-right: 20rpx;
}

.exam-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 15rpx;
}

.difficulty {
  display: flex;
  align-items: center;
}

.difficulty-label {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
}

.stars {
  display: flex;
}

.star {
  font-size: 24rpx;
  color: #ddd;
  margin-right: 4rpx;
}

.star.active {
  color: #FFD700;
}

.status-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.status-available {
  background-color: #e5f7ee;
  color: #52c41a;
}

.status-draft {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-archived {
  background-color: #f5f5f5;
  color: #888;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>